<template>
    <div class="container_box flexC JustifyContentFE AlignItemsC">
        <div class="content_box flex JustifyContentC">
            <div class="flexC JustifyContentC AlignItemsFE" style="width: 30%;height: 76%;">
                <p class="flexC textC colorF JustifyContentC AlignItemsC content_bgImg">
                    <span>年检初审</span>
                    <span style="font-size:36px;font-weight:bold;color:rgba(32,200,113,1);">2150</span>
                </p>
                <p class="flexC textC colorF JustifyContentC AlignItemsC content_bgImg">
                    <span>执行执法</span>
                    <span style="font-size:36px;font-weight:bold;color:rgba(23,150,234,1);">11</span>
                </p>
                <p class="flexC textC colorF JustifyContentC AlignItemsC content_bgImg">
                    <span>换证换届</span>
                    <span style="font-size:36px;font-weight:bold;color:rgba(205,79,48,1);">849</span>
                </p>
            </div>
            <div class="flexC JustifyContentSB AlignItemsC" style="width: 30%;height: 76%;">
                <p class="flexC textC colorF JustifyContentC AlignItemsC content_bgImg">
                    <span>实地检查</span>
                    <span style="font-size:36px;font-weight:bold;color:rgba(13,202,191,1);">345</span>
                </p>
                <p class="flex JustifyContentC AlignItemsC font_s28" style="width: 79%;height: 49%;color:rgba(20,237,252,1);">
                    <span class="content_bgImg_minzheng"><img src="../../../assets/img/comprehensive/right/03.png" alt=""></span>
                    <span style="position:relative;z-index:10;">民政局</span>
                </p>
                <p class="flexC textC colorF JustifyContentC AlignItemsC content_bgImg">
                    <span>活动备案</span>
                    <span style="font-size:36px;font-weight:bold;color:rgba(13,202,191,1);">4</span>
                </p>
            </div>
            <div class="flexC JustifyContentC" style="width: 30%;height: 76%;">
                <p class="flexC textC colorF JustifyContentC AlignItemsC content_bgImg">
                    <span>访谈约谈</span>
                    <span style="font-size:36px;font-weight:bold;color:rgba(225,216,19,1);">2</span>
                </p>
                <p class="flexC textC colorF JustifyContentC AlignItemsC content_bgImg">
                    <span>协查函</span>
                    <span style="font-size:36px;font-weight:bold;color:rgba(212,81,46,1);">0</span>
                </p>
                <p class="flexC textC colorF JustifyContentC AlignItemsC content_bgImg">
                    <span>信访舆情</span>
                    <span style="font-size:36px;font-weight:bold;color:rgba(225,216,18,1);">14</span>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
.container_box {
    width: 95%;
    height: 88%;
    margin: 0 auto;
    .content_box {
        width: 74.5%;
        height: 99%;
        background: url(../../../assets/img/comprehensive/right/01.png) no-repeat center;
        background-size: 100% 100%;
        .content_bgImg {
            width: 82%;
            height: 16.5%;
            background: url(../../../assets/img/comprehensive/right/02.png) no-repeat center;
            background-size: 100% 100%;
            margin: 1.285rem 0;
        }
        .content_bgImg_minzheng {
            position: absolute;
            z-index: 1;
            animation: imgRotate 30s linear infinite;
        }
        @keyframes imgRotate {
            0% {
                transform: rotate(0deg)
            } 100% {
                transform: rotate(360deg)
            }
        }
    }
}
</style>
